<template>
	<view class="login-page">
		<image class="login-page-bg" src="https://img.jingkakeji.com/img/static/new_login/bg.png" mode="aspectFill"></image>
		<view class="login-boxc">
			<image class="login-boxc-bg" src="https://img.jingkakeji.com/img/static/new_login/login_box.png" mode="aspectFill"></image>
			<view class="login-box">
				<view class="logo">
					<image src="https://img.jingkakeji.com/img/static/new_login/logo.png" mode="aspectFit"></image>
				</view>
				<view class="inp-box">
					<view class="tel-box">
						<view class="text">
							手机号
						</view>
						<view class="inp">
							<u--input placeholder="请输入手机号" border="none" v-model="tel" color="white" maxlength="11"
								style="width:100%; height: 100%;"></u--input>
						</view>
					</view>
					<view class="code-box">
						<view class="text">
							验证码
						</view>
						<view class="inp">
							<view class="u-demo-block">
								<view class="u-demo-block__content">
									<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
									<!-- #ifndef APP-NVUE -->
									<u-input placeholder="请输入验证码" style="border: none;" color="white" v-model="code"
										maxlength="6">
									<!-- #endif -->
										<!-- #ifdef APP-NVUE -->
										<u--input>
										<!-- #endif -->
											<template slot="suffix">
												<u-code ref="uCode" @change="codeChange" seconds="60"
													changeText="X秒重新获取"></u-code>
												<u-button @tap="getCode" :text="tips" class="code-btn"
													size="mini"></u-button>
											</template>
									<!-- #ifndef APP-NVUE -->
									</u-input>
									<!-- #endif -->
									<!-- #ifdef APP-NVUE -->
									</u--input>
									<!-- #endif -->
								</view>
							</view>
						</view>
					</view>
					<view class="agree">
						<u-checkbox-group @change="agreeChange" v-model="checkboxValue1">
							<u-checkbox shape="square" labelSize="12" labelColor="#a2a2a2"
								v-for="(item, index) in checkboxList1" :key="index" :label="item.name"
								:name="item.name"></u-checkbox>
						</u-checkbox-group>
						<view class="text">
							我已阅读<span>《用户手册》</span>和<span>《隐私协议》</span>

						</view>
					</view>
				</view>
				<view class="btn-box" @click="loginClick">
					<image class="btn-box-bg" src="https://img.jingkakeji.com/img/static/new_login/loign_btn.png" mode="aspectFit"></image>
					<text class="btn-box-text">登&nbsp;录</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		Logins,
		login,
		getCode
	} from "../../api/Login/login.js"
	import {
		setToken,
		setExpires,
		get_bd_vid
	} from "../../utils/auth.js"
	export default {
		data() {
			return {
				//是否同意协议
				checkboxValue1: [],
				checkboxList1: [{
					name: '',
					disabled: false
				}, ],
				// 手机号
				tel: "",
				// 验证码
				code: "",
				//验证码文字
				tips: '',
			}
		},
		methods: {
			//是否同意协议
			agreeChange() {
				console.log(this.checkboxValue1.length);
			},
			//验证码文字
			codeChange(text) {
				this.tips = text;
			},
			//获取验证码
			async getCode() {
				try {
					// 验证手机号是否填写
					if (!this.tel) {
						uni.showToast({
							title: "请填写手机号",
							duration: 1000,
							icon: "none"
						})
						return
					}

					// 验证手机号格式
					let reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
					if (!reg.test(this.tel)) {
						uni.showToast({
							title: "请输入正确的手机号",
							duration: 1000,
							icon: "none"
						})
						return
					}

					// 检查是否可以获取验证码
					if (!this.$refs.uCode.canGetCode) {
						uni.$u.toast('倒计时结束后再发送');
						return
					}

					// 显示加载状态
					uni.showLoading({
						title: '正在获取验证码'
					})

					// 准备请求数据
					let data = {
						mobile: this.tel,
						is_use: "1"
					}

					// 发送验证码请求
					let res = await getCode(data)
					console.log('验证码请求结果:', res);

					// 隐藏加载状态
					uni.hideLoading();

					// 处理响应结果
					if (res.code == 200) {
						uni.$u.toast(res.message);
						this.$refs.uCode.start();
					} else {
						uni.$u.toast(res.message);
						this.$refs.uCode.start();
					}

				} catch (error) {
					// 隐藏加载状态
					uni.hideLoading();

					// 错误处理
					console.error('获取验证码失败:', error);
					uni.showToast({
						title: "网络错误，请稍后重试",
						duration: 2000,
						icon: "none"
					})
				}
			},
			//点击登录
			loginClick() {
				this.login()
			},
			//登录
			async login() {
				try {
					// 验证手机号是否填写
					if (!this.tel) {
						uni.showToast({
							title: "请填写手机号",
							duration: 1000,
							icon: "none"
						})
						return
					}

					// 验证验证码是否填写
					if (!this.code) {
						uni.showToast({
							title: "请填写验证码",
							duration: 1000,
							icon: "none"
						})
						return
					}

					// 验证是否同意协议
					if (this.checkboxValue1.length == 0) {
						uni.showToast({
							title: "请阅读并同意协议",
							duration: 1000,
							icon: "none"
						})
						return
					}

					// 显示加载状态
					uni.showLoading({
						title: '正在登录...'
					})

					// 准备登录数据
					let data = {
						mobile: this.tel,
						verify: this.code
					}

					// 发送登录请求
					let res = await login(data)
					console.log('登录请求结果:', res);

					// 隐藏加载状态
					uni.hideLoading();

					// 处理登录结果
					if (res.code == 200) {
						// 登录成功
						uni.showToast({
							title: res.message,
							duration: 1000,
							icon: "success"
						})

						// 保存token和过期时间
						let token = res.data.access_token
						let expires_in = res.data.expires_in
						uni.setStorageSync("token", res.data.access_token)
						setToken(uni.getStorageSync("token"))
						setExpires(expires_in)

						// 延迟跳转到首页
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, 1500)
					} else {
						// 登录失败
						uni.showToast({
							title: res.message,
							duration: 2000,
							icon: "none"
						})
					}

				} catch (error) {
					// 隐藏加载状态
					uni.hideLoading();

					// 错误处理
					console.error('登录失败:', error);
					uni.showToast({
						title: "网络错误，请稍后重试",
						duration: 2000,
						icon: "none"
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.login-page {
		width: 100vw;
		height: 100vh;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;

		.login-page-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
		}

		.login-boxc {
			width: 630rpx;
			height: 800rpx;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 1;

			.login-boxc-bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 0;
			}

			.login-box {
				width: 90%;
				height: 90%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				position: relative;
				z-index: 1;

				.logo {
					width: 270rpx;
					height: 50rpx;
					position: relative;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.inp-box {
					width: 90%;
					height: 400rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;

					.tel-box {
						width: 100%;
						height: 140rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.text {
							color: #D1D3FF;
						}

						.inp {
							width: 100%;
							height: 80rpx;
							background-color: #3A3170;
							text-indent: 20rpx;
						}
					}

					.code-box {
						width: 100%;
						height: 140rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.text {
							color: #D1D3FF;
						}

						.inp {
							width: 100%;
							height: 80rpx;
							background-color: #3A3170;

							.code-btn {
								background-color: #3A3170;
								margin-top: 10rpx;
								color: white;
								border: none;
							}
						}
					}

					.agree {
						width: 100%;
						height: 60rpx;
						display: flex;
						align-items: center;

						.text {
							color: #ccc;
							font-size: 24rpx;

							>span {
								color: #5347a2;
							}
						}
					}
				}

				.btn-box {
					width: 270rpx;
					height: 70rpx;
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;

					.btn-box-bg {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						z-index: 0;
					}

					.btn-box-text {
						position: relative;
						z-index: 1;
						color: white;
						font-size: 26rpx;
					}
				}
			}
		}
	}
</style>